<template>
  <div class="container">
    <header>
      <img src="../../assets/Application/t-07.jpg" style="width: 100%" alt="" />
    </header>
    <div class="header">
      <div class="t-icon">
        <img class="img-responsive" :src="info.in_icon" alt="" />
      </div>
      <div class="tit">{{ info.in_name }}</div>
      <div style="text-align: center">
        <span>{{ language.banben }} : {{ info.in_bsvs }}</span>
        <span style="margin: 0 10px 0 10px"
          >{{ language.daxiao }} : {{ info.in_size }}MB</span
        >
        <span>{{ language.gengxinshijian }}:{{ info.in_addtime }}</span>
      </div>

      <!-- :href="link" -->
      <div style="margin-top: 20px">
        <div
          class="a"
          type="primary"
          @click="appDown"
          v-if="download"
          style="cursor: pointer"
        >
          <i class="el-icon-download" style="margin-right: 3px"></i>
          {{ language.xiazaianzhuang }}
        </div>
        <div style="color: green" v-else>{{ language.download }}</div>
      </div>

      <!-- 二维码 -->
      <div>
        <div class="QR">
          <canvas ref="qrcodeCanvas"></canvas>
        </div>
      </div>
      <div>{{ language.saomiaoerweimaxiazai }}</div>

      <div style="color: #2c56ff; display: flex; margin-top: 30px">
        <div
          style="margin-right: 5px"
          v-popover:popover2
          @click="dialogVisible = true"
        >
          {{ language.disclaimer }}
        </div>
      </div>

      <div style="text-align: center; margin-top: 10px; width: 100%">
        <h2 style="font-weight: 800">{{ language.hint4 }} :</h2>
        <p style="word-wrap: break-word; overflow-wrap: break-word">
          {{ info.in_appintro || info.in_name }}
        </p>
      </div>

      <div
        style="text-align: center; margin-top: 10px; width: 100%"
        v-if="info.in_remark"
      >
        <h2 style="font-weight: 800">{{ language.hint5 }} :</h2>
        <p>{{ info.in_remark }}</p>
      </div>

      <!-- 弹框 -->
      <el-dialog :visible.sync="dialogVisible" width="600">
        <template #title>
          <div style="text-align: center; font-size: 18px; color: black">
            {{ language.disclaimer }}
          </div>
        </template>
        <p>{{ language.disclaimerbody1 }}</p>
        <br />
        <p>{{ language.disclaimerbody2 }}</p>
        <br />
        <p>{{ language.disclaimerbody3 }}</p>
      </el-dialog>
    </div>
    <el-dialog
      :title="language.hint3"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <el-form :model="Form">
        <el-form-item>
          <el-input v-model="Form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">{{
          language.queding
        }}</el-button>
      </div>
    </el-dialog>
    <wechat-mask></wechat-mask>
  </div>
</template>

<script>
import { appDown, dec_upload } from '@/api/App';
import QRcode from 'qrcode';
import WechatMask from '@/components/WechatMask.vue';
import En from '@/utils/En';
import Zh from '@/utils/Zh';
import ZhTw from '@/utils/Zh-tw';

export default {
  components: {
    WechatMask,
  },
  computed: {
    language() {
      if (this.info.template_language === 'zh') {
        return Zh;
      }

      if (this.info.template_language === 'en') {
        return En;
      }

      if (this.info.template_language === 'zh-tw') {
        return ZhTw;
      }

      return Zh;
    },
  },

  data() {
    return {
      Form: {
        password: '',
      },
      dialogFormVisible: false,
      // state: '1',
      equipment: null,
      download: true,
      link: '', //跳转链接
      //信息数据
      info: {},
      //上传列表
      dialogVisible: false, //免责
      form: {
        emaill: '',
        type: '',
        cause: '',
      },
    };
  },
  created() {
    var userAgent = navigator.userAgent;
    if (userAgent.match(/Android/i)) {
      this.equipment = 'Android';
    } else if (userAgent.match(/iPhone|iPad|iPod/i)) {
      this.equipment = 'iOS';
    } else {
      this.equipment = 'PC';
    }
    this.getDetails(this.$route.params.id);
  },
  methods: {
    handleClose() {
      if (this.Form.password === this.info.in_apppwd) {
        this.down();
      } else {
        this.$message.error(this.language.hint6);
        this.download = true;
      }
      this.Form.password = '';
      this.dialogFormVisible = false;
    },
    down() {
      if (this.equipment === 'Android') {
        this.AndroidDown();
      } else if (this.equipment === 'iOS') {
        this.iOSDown();
      } else {
        this.PCDown();
      }
    },
    async Dec_upload(in_id) {
      await dec_upload({ in_id });
    },
    async AndroidDown() {
      if (this.info.in_form === 'Android') {
        await this.Dec_upload(this.info.in_id);
        window.location.href = this.info.in_app;
      } else {
        if (this.info.merge && this.info.merge.in_form === 'Android') {
          await this.Dec_upload(this.info.merge.in_id);
          window.location.href = this.info.merge.in_app;
        } else {
          this.$message.warning(this.language.hint2);
          this.download = true;
        }
      }
    },
    async iOSDown() {
      if (this.info.in_form === 'iOS') {
        await this.Dec_upload(this.info.in_id);
        window.location.href = `itms-services://?action=download-manifest&url=${this.info.plist}`;
      } else {
        if (this.info.merge && this.info.merge.in_form === 'iOS') {
          await this.Dec_upload(this.info.merge.in_id);
          window.location.href = `itms-services://?action=download-manifest&url=${this.info.merge.plist}`;
        } else {
          this.$message.warning(this.language.hint1);
          this.download = true;
        }
      }
    },
    async PCDown() {
      await dec_upload({ in_id: this.info.in_id });
      window.location.href = this.info.in_app;
    },
    appDown() {
      this.download = false;
      this.info.in_apppwd ? (this.dialogFormVisible = true) : this.down();
    },
    //二维码
    getCanvas() {
      QRcode.toCanvas(
        this.$refs.qrcodeCanvas,
        // "https://blog.csdn.net/weixin_47886687?spm=1010.2135.3001.5113", //假二维码待替换
        `${window.location.origin}/download/${this.$route.params.id}`, //真二维码
        {
          with: 200,
          color: {
            bark: '#000',
            light: '#ffff',
          },
        }
      );
    },
    async getDetails(id) {
      const { data, status, message } = await appDown(id);
      if (status === 0) {
        document.title = data.in_name;
        this.info = data;
        this.info.in_size = this.info.in_size / 1024 / 1024;
        this.info.in_size = this.info.in_size.toFixed(2);
        this.link = data.in_app;
        this.getCanvas();
      } else {
        this.$alert(message, this.language.tips, {
          confirmButtonText: this.language.queding,
          callback: () => {
            window.location.href = 'https://www.baidu.com';
          },
        });
      }
    },
  },
};
</script>

<style scoped>
.a {
  border-radius: 5px;
  background-color: #2c56ff;
  width: 100px;
  display: flex;
  height: 30px;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.tit {
  font-size: 28px;
  margin-bottom: 10px;
  margin-top: 15px;
}

.img-responsive {
  width: 105px;
  height: 105px;
  border-radius: 30px;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
}

.t-icon {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  width: 100%;
}
</style>
